import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_im_demo/state/global_state.dart';
import 'package:flutter_im_demo/widget/loading_widget.dart';
import 'package:flutter_im_demo/widget/navigation_widget.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';
import 'package:provider/provider.dart';

import '../const_value.dart';
import 'friend_list_page.dart';

const _fontColor = Color(0xff32447D);
const _smallFontColor = Color(0xff8089AC);
const _iconColor = Color(0xff3870FA);

class MyInfoPage extends StatelessWidget {
  const MyInfoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        actions: <Widget>[
          IconButton(
              icon: Icon(
                FontAwesomeIcons.edit,
                size: iconSize,
                color: Colors.black,
              ),
              onPressed: () {}),
        ],
      ),
      body: SingleChildScrollView(
        child: Consumer<GlobalState>(builder: (context, state, _) {
          return state.isLogin != null && state.isLogin
              ? (state.isLoading
                  ? const LoadingWidget()
                  : Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 26.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              MyCircleAvatar(
                                height: 90.0,
                                avatar: state.userInfoModel.avatar,
                                tag: state.userInfoModel.nickName,
                              ),
                              const SizedBox(width: 24.0),
                              Expanded(
                                  child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    state.userInfoModel.nickName,
                                    style: TextStyle(
                                        color: _fontColor,
                                        fontSize: 22.0,
                                        fontWeight: FontWeight.bold),
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                  const SizedBox(height: 10.0),
                                  Text(
                                    state.userInfoModel.phone,
                                    style: TextStyle(
                                        fontSize: 14.0, color: _smallFontColor),
                                  ),
                                ],
                              )),
                            ],
                          ),
                          const SizedBox(height: 30.0),
                          const _ItemWidget(
                              icon: Icon(
                                FontAwesomeIcons.file,
                                color: _iconColor,
                              ),
                              title: "最近文件"),
                          const _ItemWidget(
                            icon: Icon(
                              FontAwesomeIcons.heart,
                              color: _iconColor,
                            ),
                            title: "收藏",
                          ),
                          const _ItemWidget(
                            icon: Icon(
                              FontAwesomeIcons.git,
                              color: _iconColor,
                            ),
                            title: "代码",
                          ),
                          const _ItemWidget(
                            icon: Icon(
                              FontAwesomeIcons.handPointRight,
                              color: _iconColor,
                            ),
                            title: "Flutter",
                          ),
                          const _ItemWidget(
                            icon: Icon(
                              FontAwesomeIcons.envelope,
                              color: _iconColor,
                            ),
                            title: "开发者邮箱",
                          ),
                          const SizedBox(height: 16.0),
                          const _ItemWidget(
                            icon: Icon(
                              FontAwesomeIcons.powerOff,
                              color: Color(0xffFF1237),
                            ),
                            title: "退出",
                          ),
                        ],
                      ),
                    ))
              : const NavigationWidget();
        }),
      ),
    );
  }
}

class _ItemWidget extends StatelessWidget {
  final Icon icon;
  final String title;
  final TextStyle style;
  final GestureTapCallback onTap;

  const _ItemWidget({Key key, this.icon, this.title, this.style, this.onTap})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _itemFontStyle =
        TextStyle(color: _fontColor, fontWeight: FontWeight.bold);
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 2.0),
        child: Row(
          children: <Widget>[
            icon,
            const SizedBox(width: 26.0),
            Text(
              title,
              style: style != null ? style : _itemFontStyle,
            ),
          ],
        ),
      ),
    );
  }
}
